<template>
	<view class="">
		<swiper class="detailSwiper" 
				indicator-active-color="#0bc9fd" 
				indicator-color="#b3b3b3" 
				:indicator-dots="true" 
				:autoplay="true" 
				:interval="3000" 
				:duration="1000">
			<swiper-item v-for="(item, index) in banner" :key="index">
				<view class="swiper-item">
					<navigator url="#" hover-class="none">
						<image :src="imgUrl + item.image" mode=""></image>
					</navigator>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		props:{
			banner:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				imgUrl:this.$imgUrl
			}
		}
	}
</script>

<style>
	.detailSwiper{
		width: 100%;
		height: 525rpx;
	}
	.detailSwiper image{
		width: 470rpx;
		height: 470rpx;
		display: block;
		margin: 0 auto;
	}
</style>
